<template>
	<!-- 20230426 推荐产品列表、产品列表-->
	<view class="mall-recommend-product-list-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="" v-if="type == 1">
				<ty-list-list :status="loadStatus">
					<!-- 样式一 一行一个 -->
					<view class="padding-lr-30 padding-top-10 padding-bottom-20 bg-ff">
						<view class="padding-tb-10 flex align-center" v-for="(item,index) in list" :key="index"
							@click="go('/pages/mall/detail?id='+item.id)">
							<!-- 图片 -->
							<image :src="item.cover_img" mode="aspectFill" class="jc-image-200 radius-10"></image>

							<view class="margin-left-20 flex-one">
								<view class="line-40 height-80 text-cut-two text-28">{{item.name}}</view>
								<view class="margin-top-45 text-price text-30 text-main">{{item.price_min}}</view>
								<view class="margin-top-10 text-24 text-aa">已售{{item.sales_number}}</view>
							</view>
						</view>
					</view>
				</ty-list-list>
			</view>

			<view class="padding-lr-30 padding-tb-10" v-if="type == 2">
				<ty-list-list :status="loadStatus">
					<!-- 样式二 一行两个 -->
					<view class="flex align-center flex-wrap">
						<!-- 单个产品 -->
						<view class="overflow-hidden margin-tb-10 radius-10 bg-ff"
							:class="{'margin-right-20': (index + 1) % 2 != 0}" style="width: 335rpx;"
							v-for="(item,index) in list" :key="index" @click="go('/pages/mall/detail?id='+item.id)">
							<!-- 图片 -->
							<view class="position-relative">
								<image class="jc-image" style="width: 335rpx;height: 335rpx;" :src="item.cover_img"
									mode="aspectFill"></image>
								<!-- 标签 -->
								<view class="label-items flex align-center" v-if="isLabelShow">
									<view class="margin-right-10" v-for="(item1,index1) in item.mallLabel"
										:key="index1">
										<ty-text-label :text="item1.name" :bg-color="item1.color" :padding="5"
											:radius="0"></ty-text-label>
									</view>
								</view>
							</view>
							<!-- 标题和价钱 -->
							<view class="padding-tb-20 padding-lr-15">
								<!-- 标题 -->
								<view class="line-40 height-80 text-30 text-33 text-cut-two">{{item.name}}</view>

								<!-- 价钱和销量 -->
								<view class="margin-top-20 flex align-center justify-between">
									<view class="text-price text-34 text-bold text-main">{{item.price_min}}</view>
									<view class="text-24 text-aa">已售{{item.sales_number}}</view>
								</view>
							</view>
						</view>
					</view>
				</ty-list-list>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 列表
			list: {
				type: Array,
				default: []
			},
			// 列表状态
			loadStatus: {
				type: String,
				default: ''
			},
			// 显示样式 1--一行1个 2--1行2个
			type: {
				type: Number,
				default: 2
			},
			// 是否显示标签
			isLabelShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	/* 产品标签 */
	.label-items {
		position: absolute;
		left: 0;
		bottom: 0;
	}
</style>